import { useStorage } from "@vueuse/core";
import { darkTheme } from "naive-ui";
import type { GlobalThemeOverrides, GlobalTheme } from "naive-ui";

export const useTheme = () => {
  // 是否是暗色模式
  const isDark = useCookie("blog-dark-mode", {
    default: () => false,
    sameSite: "lax",
  });
  // 默认主题色
  const themeColor = useCookie("blog-theme-color", {
    default: () => "blue",
    sameSite: "lax",
  }); // 这里useCookie代替 localStorage 存储，因为 localStorage 在浏览器关闭后会清空，而 useCookie 不会

  // 主题色配置
  const themeColorOptions = reactive({
    blue: {
      primary: "#3b82f6",
      primaryHover: "#2563eb",
      info: "#0ea5e9",
    },
    green: {
      primary: "#10b981",
      primaryHover: "#059669",
      info: "#10b981",
    },
    purple: {
      primary: "#8b5cf6",
      primaryHover: "#7c3aed",
      info: "#a78bfa",
    },
    red: {
      primary: "#ef4444",
      primaryHover: "#dc2626",
      info: "#f87171",
    },
    orange: {
      primary: "#f97316",
      primaryHover: "#ea580c",
      info: "#fb923c",
    },
    pink: {
      primary: "#ec4899",
      primaryHover: "#db2777",
      info: "#f472b6",
    },
    cyan: {
      primary: "#06b6d4",
      primaryHover: "#0891b2",
      info: "#22d3ee",
    },
    yellow: {
      primary: "#eab308",
      primaryHover: "#ca8a04",
      info: "#facc15",
    },
    gray: {
      primary: "#6b7280",
      primaryHover: "#4b5563",
      info: "#9ca3af",
    },
    dark: {
      primary: "#1e293b",
      primaryHover: "#0f172a",
      info: "#334155",
    },
  });
  // 获取当前主题色
  const currentThemeColor = computed(
    () => themeColorOptions[themeColor.value as keyof typeof themeColorOptions]
  );
  console.log(currentThemeColor.value);

  // 生成Naive UI 的主题覆盖对象
  const themeOverrides = computed<GlobalThemeOverrides>(() => ({
    common: {
      primaryColor: currentThemeColor.value.primary,
      primaryColorHover: currentThemeColor.value.primaryHover,
      infoColor: currentThemeColor.value.info,
    },
    Button: {
      textColorPrimary: "#fff",
    },
    Tag: {
      border: `1px solid ${currentThemeColor.value.primary}`,
      textColor: currentThemeColor.value.primary,
    },
  }));

  // 当前主题色 （亮色或者暗色）
  const theme = computed<GlobalTheme | null>(() =>
    isDark.value ? darkTheme : null
  );

  // 切换深色/浅色模式
  const toggleDarkMode = () => {
    isDark.value = !isDark.value;
    applyThemeToBody();
  };
  const setThemeColor = (color: string) => {
    if (color in themeColorOptions) {
      themeColor.value = color;

      applyThemeToBody();
    }
  };
  // 应用主题色
  const applyThemeToBody = () => {
    const root = document.documentElement;
    const color = currentThemeColor.value;
    // 设置主题色变量
    root.style.setProperty("--primary-color", color.primary);
    root.style.setProperty("--primary-color-hover", color.primaryHover);
    if (isDark.value) {
      // 暗色模式
      root.style.setProperty("--bg-primary", "#1a1a1a");
      root.style.setProperty("--bg-secondary", "#2a2a2a");
      root.style.setProperty("--text-primary", "#f5f5f5");
      root.style.setProperty("--text-secondary", "#d4d4d4");
      root.classList.add("dark");
    } else {
      // 浅色模式
      root.style.setProperty("--bg-primary", "#f5f5f5");
      root.style.setProperty("--bg-secondary", "#ffffff");
      root.style.setProperty("--text-primary", "#1a1a1a");
      root.style.setProperty("--text-secondary", "#4a4a4a");
      root.classList.remove("dark");
    }
  };
  const themeColors = computed(() => {
    const themeColorObj = {} as Record<string, string>;
    Object.entries(themeColorOptions).map(([key, { primary }]) => {
      themeColorObj[key] = primary;
    });
    return themeColorObj;
  });
  onMounted(() => {
    applyThemeToBody();
  });
  return {
    isDark,
    themeColor,
    themeColorOptions,
    currentThemeColor,
    themeOverrides,
    theme,
    setThemeColor,
    toggleDarkMode,
    themeColors,
  };
};
